<template>
	<div class="list-box">
		<el-button type="primary" @click="handleAdd">
			<el-icon>
				<Plus />
			</el-icon> 新增
		</el-button>
		<el-table :data="userList" style="width: 100%; margin-top: 10px;">
			<el-table-column type="index" label="序号" align="center" width="55" />
			<el-table-column property="userName" label="用户名" align="center" />
			<el-table-column property="userPassword" label="密码" align="center" />
			<el-table-column property="userEmail" label="邮箱" align="center" />
			<el-table-column label="操作" align="center">
				<template #default="scope">
					<el-button link type="primary" size="small" @click="handleUpdate(scope.row)">
						<el-icon>
							<EditPen />
						</el-icon> 编辑
					</el-button>
					<el-button link type="primary" size="small" @click="handleDelete(scope.row)">
						<el-icon>
							<Delete />
						</el-icon> 删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 对话框 -->
		<el-dialog v-model="showDialog" :title="dialogTitle" width="500">
			<component :is="showComp" v-if="showComp" :userId="showUserId" @refreshEvent="handleRefresh"></component>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ElTable,
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		onMounted,
		ref
	} from 'vue'
	import axios from 'axios'

	import {
		useRouter
	} from 'vue-router'

	// 导入新增或者修改组件
	import UserAdd from './add.vue'
	import UserEdit from './edit.vue'
	let userName = ref(localStorage.getItem('user_name'))
	// 路由实例对象
	const router = useRouter()

	// 初始化弹窗
	const showDialog = ref(false)
	// 弹窗标题
	const dialogTitle = ref('')
	// 动态切换组件
	const showComp = ref(null)
	// 传递的userId参数
	const showUserId = ref(null)

	// 初始化用户列表数据
	const userList = ref([])
	// 监听挂载成功的回调函数
	onMounted(() => {
		getUserData()
	})

	// 封装一个方法 用于获取用户列表数据
	const getUserData = () => {
		axios.get('/api/script/user/list').then(res => {
			if (res.data.code == 200) {
				userList.value = res.data.data
			} else {
				userList.value = []
			}
		}).catch(err => {})
	}
	// 监听点击新增按钮时 执行的方法
	const handleAdd = () => {
		showDialog.value = true
		dialogTitle.value = '新增用户'
		showComp.value = UserAdd
		showUserId.value = null
	}
	// 监听点击修改按钮时 执行的方法
	const handleUpdate = (row) => {
		showDialog.value = true
		dialogTitle.value = '修改用户'
		showComp.value = UserEdit
		showUserId.value = row.userId
	}
	// 监听点击删除按钮时 执行的方法
	const handleDelete = (row) => {
		ElMessageBox.confirm(
				'确认要删除选中的用户信息吗?',
				'提示信息', {
					confirmButtonText: '是',
					cancelButtonText: '否',
					type: 'warning',
				}
			)
			.then(() => {
				axios.delete('/api/script/user/' + row.userId).then(res => {
					if (res.data.code == 200) {
						ElMessage({
							message: '删除成功',
							type: 'success'
						})
						// 删除成功后 需要重新再次请求最新的用户数据
						getUserData()
					} else {
						ElMessage({
							message: '删除失败',
							type: 'error'
						})
					}
				}).catch(err => {})
			})
	}
	
	// 监听新增或者修改子组件回调刷新 
	const handleRefresh = (newUserName) => {
		showDialog.value = false
		showUserId.value = null
		// 刷新用户信息列表
		getUserData(),
		userName=ref(newUserName)
	}
</script>

<style>
</style>